<template>
  <div class="sidebar">
    <div class="sidebar-header">
      <h2>农场管理系统</h2>
    </div>
    
    <nav class="sidebar-nav">
      <ul class="nav-list">
        <!-- 工作台 -->
        <li class="nav-item" :class="{ active: currentRoute === '/workbench' }">
          <router-link to="/workbench" class="nav-link">
            <i class="nav-icon document-icon"></i>
            <span class="nav-text">工作台</span>
          </router-link>
        </li>
        
        <!-- 数据看板 -->
        <li class="nav-item">
          <div class="nav-link" @click="toggleDashboard">
            <i class="nav-icon folder-icon"></i>
            <span class="nav-text">数据看板</span>
            <i class="nav-arrow" :class="{ expanded: isDashboardExpanded }"></i>
          </div>
          
          <!-- 子菜单 -->
          <ul class="sub-nav-list" v-show="isDashboardExpanded">
            <li class="sub-nav-item" :class="{ active: currentRoute === '/dashboard/planting-area' }">
              <router-link to="/dashboard/planting-area" class="sub-nav-link">
                <i class="nav-icon document-icon"></i>
                <span class="nav-text">基地种植面积看板</span>
              </router-link>
            </li>
            <li class="sub-nav-item" :class="{ active: currentRoute === '/dashboard/subsidy-overview' }">
              <router-link to="/dashboard/subsidy-overview" class="sub-nav-link">
                <i class="nav-icon document-icon"></i>
                <span class="nav-text">项目补助概况看板</span>
              </router-link>
            </li>
            <li class="sub-nav-item" :class="{ active: currentRoute === '/dashboard/urban-base' }">
              <router-link to="/dashboard/urban-base" class="sub-nav-link">
                <i class="nav-icon document-icon"></i>
                <span class="nav-text">城镇基地概况看板</span>
              </router-link>
            </li>
            <li class="sub-nav-item" :class="{ active: currentRoute === '/dashboard/large-screen' }">
              <router-link to="/dashboard/large-screen" class="sub-nav-link">
                <i class="nav-icon document-icon"></i>
                <span class="nav-text">看板大屏幕链接</span>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const isDashboardExpanded = ref(true)

const currentRoute = computed(() => route.path)

const toggleDashboard = () => {
  isDashboardExpanded.value = !isDashboardExpanded.value
}
</script>

<style scoped>
.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.sidebar-header h2 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.sidebar-nav {
  flex: 1;
  padding: 20px 0;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-bottom: 5px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #666;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  background-color: #e8f4fd;
  color: #1890ff;
}

.nav-item.active .nav-link {
  background-color: #1890ff;
  color: white;
}

.nav-icon {
  width: 16px;
  height: 16px;
  margin-right: 12px;
  display: inline-block;
}

.document-icon {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/></svg>') no-repeat center;
  background-size: contain;
}

.folder-icon {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"/></svg>') no-repeat center;
  background-size: contain;
}

.nav-text {
  flex: 1;
  font-size: 14px;
}

.nav-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat center;
  background-size: contain;
}

.nav-arrow.expanded {
  transform: rotate(180deg);
}

.sub-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fafafa;
}

.sub-nav-item {
  margin: 0;
}

.sub-nav-link {
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 48px;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 13px;
}

.sub-nav-link:hover {
  background-color: #e8f4fd;
  color: #1890ff;
}

.sub-nav-item.active .sub-nav-link {
  background-color: #e6f7ff;
  color: #1890ff;
}

.sub-nav-link .nav-icon {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
</style> 